:root {
  --main-bg-color: black;
  --main-fg-color: white;
  --selected-bg-color: #86e3ed;
  --comment-color: #eb8e5b;
  --last-modified-color: #df463e;
  --all-modified-color: #fff259;
  --font: "cartograph";
  --highlight-color: #fff259; /* Snake color */
  --accent-text-color: #a9ed96; /* Caterpillar color */
  --line-height: 1.6;
}

* {
  scrollbar-color: var(--main-fg-color) var(--main-bg-color);
  font-family: var(--font), monospace, monospace;
  font-variant-ligatures: none;
}

*::-webkit-scrollbar {
  background: var(--main-bg-color);
  width: 7px;
  height: 7px;
}

*::-webkit-scrollbar-thumb {
  background: var(--main-fg-color);
  border-radius: 7px;
}

*:focus-visible {
  outline: none;
  box-shadow: inset 1px 1px 0 var(--main-fg-color),
    inset -1px -1px 0 var(--main-fg-color);
}

*:active {
  box-shadow: none;
}

*::selection {
  background: var(--highlight-color);
  color: black;
}

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
}

body {
  color: var(--main-fg-color);
  background: var(--main-bg-color);
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
  font-size: 13px;
  overflow: hidden;
  line-height: var(--line-height);
}

button {
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: inherit;
  border: 1px solid;
  border-color: inherit;
  box-shadow: none;
  user-select: none;
  line-height: inherit;
}

@font-face {
  font-family: "cartograph";
  src: url("/fonts/CartographCF-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "cartograph";
  src: url("/fonts/CartographCF-ExtraLight.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "cartograph";
  src: url("/fonts/CartographCF-Light.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "cartograph";
  src: url("/fonts/CartographCF-Regular.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "cartograph";
  src: url("/fonts/CartographCF-DemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "cartograph";
  src: url("/fonts/CartographCF-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "cartograph";
  src: url("/fonts/CartographCF-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "cartograph";
  src: url("/fonts/CartographCF-Heavy.woff") format("woff");
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: "cartograph";
  src: url("/fonts/CartographCF-ThinItalic.woff") format("woff");
  font-weight: 100;
  font-style: italic;
}

@font-face {
  font-family: "cartograph";
  src: url("/fonts/CartographCF-ExtraLightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "cartograph";
  src: url("/fonts/CartographCF-LightItalic.woff") format("woff");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "cartograph";
  src: url("/fonts/CartographCF-RegularItalic.woff") format("woff");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "cartograph";
  src: url("/fonts/CartographCF-DemiBoldItalic.woff") format("woff");
  font-weight: 600;
  font-style: italic;
}

@font-face {
  font-family: "cartograph";
  src: url("/fonts/CartographCF-BoldItalic.woff") format("woff");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "cartograph";
  src: url("/fonts/CartographCF-ExtraBoldItalic.woff") format("woff");
  font-weight: 800;
  font-style: italic;
}

@font-face {
  font-family: "cartograph";
  src: url("/fonts/CartographCF-HeavyItalic.woff") format("woff");
  font-weight: 900;
  font-style: italic;
}
